<template>
  <el-dialog
    title="换题申请详情"
    :visible.sync="dialogVisible"
    width="800px"
    @close="handleClose"
  >
    <div v-loading="loading">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="申请时间">
          {{ parseTime(detail.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="申请状态">
          <el-tag :type="getStatusType(detail.finalStatus || detail.status)" size="small">
            {{ detail.finalStatus || detail.status }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="变更类型" :span="2">
          <el-tag :type="isSameTeacher ? 'info' : 'primary'" size="small">
            {{ isSameTeacher ? '同教师内换题' : '跨教师换题' }}
          </el-tag>
          <span v-if="isSameTeacher" style="color: #909399; font-size: 12px; margin-left: 10px;">
            （在同一教师的不同题目间切换，只需该教师审核一次）
          </span>
          <span v-else style="color: #909399; font-size: 12px; margin-left: 10px;">
            （需要原教师和新教师都同意）
          </span>
        </el-descriptions-item>
        
        <el-descriptions-item label="原题目" :span="2">
          <div><strong>{{ detail.oldTopicTitle }}</strong></div>
          <div style="color: #909399; font-size: 12px; margin-top: 5px;">
            指导教师: {{ detail.oldTeacherName }} ({{ detail.oldTeacherNo }})
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item label="新题目" :span="2">
          <div><strong>{{ detail.newTopicTitle }}</strong></div>
          <div style="color: #909399; font-size: 12px; margin-top: 5px;">
            指导教师: {{ detail.newTeacherName }} ({{ detail.newTeacherNo }})
          </div>
        </el-descriptions-item>
        
        <el-descriptions-item label="变更理由" :span="2">
          <div style="white-space: pre-wrap; line-height: 1.6;">{{ detail.changeReason }}</div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 审核进度 -->
      <el-divider content-position="left">
        <i class="el-icon-s-check"></i> 审核进度
      </el-divider>

      <el-timeline style="padding-left: 20px;">
        <el-timeline-item
          :timestamp="parseTime(detail.createTime)"
          placement="top"
          type="primary"
          icon="el-icon-edit"
        >
          <h4>提交申请</h4>
          <p>您已提交换题申请</p>
        </el-timeline-item>

        <!-- 同一教师：只显示一次审核 -->
        <template v-if="isSameTeacher">
          <el-timeline-item
            v-if="detail.oldTeacherOpinion"
            :timestamp="parseTime(detail.oldTeacherReviewTime)"
            placement="top"
            :type="detail.oldTeacherOpinion === '同意' ? 'success' : 'danger'"
            :icon="detail.oldTeacherOpinion === '同意' ? 'el-icon-check' : 'el-icon-close'"
          >
            <h4>教师审核 - {{ detail.oldTeacherOpinion }}</h4>
            <p>{{ detail.oldTeacherName }}</p>
            <p v-if="detail.oldTeacherReason" style="color: #909399;">
              意见: {{ detail.oldTeacherReason }}
            </p>
          </el-timeline-item>

          <el-timeline-item
            v-if="!detail.oldTeacherOpinion && detail.status === '待审核'"
            type="info"
            icon="el-icon-time"
          >
            <h4>等待教师审核</h4>
            <p>{{ detail.oldTeacherName }}</p>
          </el-timeline-item>
        </template>

        <!-- 不同教师：显示两次审核 -->
        <template v-else>
          <el-timeline-item
            v-if="detail.oldTeacherOpinion"
            :timestamp="parseTime(detail.oldTeacherReviewTime)"
            placement="top"
            :type="detail.oldTeacherOpinion === '同意' ? 'success' : 'danger'"
            :icon="detail.oldTeacherOpinion === '同意' ? 'el-icon-check' : 'el-icon-close'"
          >
            <h4>原教师审核 - {{ detail.oldTeacherOpinion }}</h4>
            <p>{{ detail.oldTeacherName }}</p>
            <p v-if="detail.oldTeacherReason" style="color: #909399;">
              意见: {{ detail.oldTeacherReason }}
            </p>
          </el-timeline-item>

          <el-timeline-item
            v-if="!detail.oldTeacherOpinion && detail.status === '待审核'"
            type="info"
            icon="el-icon-time"
          >
            <h4>等待原教师审核</h4>
            <p>{{ detail.oldTeacherName }}</p>
          </el-timeline-item>

          <el-timeline-item
            v-if="detail.newTeacherOpinion"
            :timestamp="parseTime(detail.newTeacherReviewTime)"
            placement="top"
            :type="detail.newTeacherOpinion === '同意' ? 'success' : 'danger'"
            :icon="detail.newTeacherOpinion === '同意' ? 'el-icon-check' : 'el-icon-close'"
          >
            <h4>新教师审核 - {{ detail.newTeacherOpinion }}</h4>
            <p>{{ detail.newTeacherName }}</p>
            <p v-if="detail.newTeacherReason" style="color: #909399;">
              意见: {{ detail.newTeacherReason }}
            </p>
          </el-timeline-item>

          <el-timeline-item
            v-if="detail.oldTeacherOpinion === '同意' && !detail.newTeacherOpinion && detail.status === '待审核'"
            type="info"
            icon="el-icon-time"
          >
            <h4>等待新教师审核</h4>
            <p>{{ detail.newTeacherName }}</p>
          </el-timeline-item>
        </template>

        <el-timeline-item
          v-if="detail.finalStatus === '已通过'"
          type="success"
          icon="el-icon-success"
        >
          <h4>换题成功</h4>
          <p v-if="isSameTeacher">教师已同意，您已成功换到新题目</p>
          <p v-else>两位教师都已同意，您已成功换到新题目</p>
        </el-timeline-item>

        <el-timeline-item
          v-if="detail.finalStatus === '已拒绝'"
          type="danger"
          icon="el-icon-error"
        >
          <h4>申请被拒绝</h4>
          <p>换题申请未通过</p>
        </el-timeline-item>
      </el-timeline>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMyChangeRequestDetail } from "@/api/system/topicChangeRequest";

export default {
  name: "DetailDialog",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      detail: {}
    };
  },
  computed: {
    /** 判断是否是同一个教师 */
    isSameTeacher() {
      return this.detail.oldTeacherId === this.detail.newTeacherId;
    }
  },
  methods: {
    /** 打开对话框 */
    open(requestId) {
      this.dialogVisible = true;
      this.getDetail(requestId);
    },
    /** 获取详情 */
    getDetail(requestId) {
      this.loading = true;
      getMyChangeRequestDetail(requestId).then(response => {
        this.detail = response.data;
        this.loading = false;
      });
    },
    /** 关闭对话框 */
    handleClose() {
      this.detail = {};
    },
    /** 状态标签类型 */
    getStatusType(status) {
      const map = {
        '待审核': 'warning',
        '已通过': 'success',
        '已拒绝': 'danger',
        '已取消': 'info'
      };
      return map[status] || 'info';
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-descriptions__label {
  font-weight: bold;
}

::v-deep .el-timeline-item__timestamp {
  color: #909399;
  font-size: 12px;
}
</style>